<template>
  <div class="block">
    <ul >
      <li v-for="(str,i) of arr" :key="i" @mouseenter="mouseEnter" :data-num='i'>
        <dl class="close">
          <dt>{{i+1}}</dt>
          <dd>
            <span class="bookName">
              <a href="#" :title="arr[i].title">{{arr[i].title}}</a>
            </span>
            <span class="num">
              <s></s>{{arr[i].browse}}
            </span>
          </dd>
        </dl>
        <dl class="open" v-show="num==i">
          <dt>{{i+1}}</dt>
          <dd>
            <div>
              <span class="bookPic">
                <a href="#" target="_blank" :title="arr[i].title">
                  <img :src="arr[i].md_img" :alt="arr[i].title">  
                </a>
              </span>
              <div class="bookCon">
                <p>
                  <a href="#" :title="arr[i].title">{{arr[i].title}}</a>
                </p>
                <span class="num">
                  <s></s>{{arr[i].browse}}
                </span>
              </div>
            </div>
          </dd>
        </dl>
      </li>
    </ul>
</div>
</template>

<script>
  export default {
    data() {
      return {
        arr:[],
        num:0
      };
    },
    methods:{
      mouseEnter(e){
      console.log(e.target.dataset.num)
      this.num=e.target.dataset.num
      }
    },
    mounted(){
        this.axios.get("/indexread/rlist/"+2).then(res=>{
        // console.log(res.data);
        this.arr=res.data.data
        // console.log(this.arr)
    })
    }
  }
</script>
<style scoped>
*{
    /* box-sizing: border-box; */
	margin: 0;
	padding: 0;
}
body{
	list-style: none;
  color:#9e9e9e;
	background: #f0f0f0;
  font:12px/20px "Microsoft Yahei", arial,sans-serif ;
  font-weight: normal;
}
.container{
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
}
a {
    text-decoration: none;
    outline: none;
    font-family: "Microsoft Yahei", arial,sans-serif;
    color: #9e9e9e;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
img {
	/* 让图片(行内块元素)与同一行中的内容竖直居中对齐 */
	vertical-align: middle;
}
input{
	outline: none;
}
h2,h3{
	font-style: normal;
	font-weight: normal;
}
s {
    background: url(https://pweb.d.zhangyue01.com/static/images/common/icon.png) no-repeat;
}
ul li,ul li dl{
  overflow: hidden;
} 
.block .close dt{
  line-height: 35px;
}
.block dl dt{
  float: left;
  text-align: right;
  width: 10px;
  margin-right: 18px;
}
.block .close dd {
    width: 200px;
    height: 35px;
    line-height: 35px;
}
.block dl dd{
  float: left;
  border-bottom: 1px solid #f0f0f0;
  width: 200px;
}
.block .close dd .bookName{
    width: 130px;
    height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
}
.block .close dd .num{
  float: right;
  font-size: 12px;
  font-family: arial;
  float: left;
  margin-left: 10px;
}
.block .close dd s{
  margin-top: 12px;
}
.block dl dd s{
    float: left;
    width: 14px;
    height: 9px;
    background-position: -86px -73px;
    margin: 6px 6px 0 0;
}
.block .open{
  padding-top: 16px;
}
.block .open dd .bookPic{
    width: 63px;
    height: 84px;
    display: block;
    border: 1px solid #f0f0f0;
    float: left;
    margin: 0 16px 16px 0;
}
.block .open dd .bookPic img{
  width: 63px;
  height: 84px;
}
.block .open dd .bookCon{
  float: left;
}
.block .open dd .bookCon p{
    color: #212121;
    width: 100px;
    max-height: 32px;
    line-height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.block .open dd .bookCon .num{
  font-size: 12px;
  font-family: arial;
}
</style>
